<template>
  <div>
    <el-button type="primary" :loading="userDataLoading">用户的实时数量：{{ userNum }}</el-button>
    <el-button type="primary" :loading="productDataLoading"
      >商品的实时数量：{{ productNum }}</el-button
    >
  </div>

  <el-row>
    <el-col :span="24">
      <div id="main"></div>
    </el-col>
    <el-col :span="24">
      <div id="main2"></div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import {
  userTongjiRequest,
  productTongjiRequest,
  getkDataRequest,
  getsimpleDataRequest,
} from '@/api/sataistic'
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { log } from 'echarts/types/src/util/log.js'

let userNum = ref(0)
let userDataLoading = ref(false)
let productNum = ref(0)
let productDataLoading = ref(false)

setInterval(() => {
  // userDataLoading.value = true
  setTimeout(() => {
    userTongjiRequest().then((r) => {
      // userDataLoading.value = false
      //   console.log(r.data)
      userNum.value = r.data.data
    })
  }, 1000)
}, 2000)

setInterval(() => {
  //   productDataLoading.value = true
  setTimeout(() => {
    productTongjiRequest().then((r) => {
      //   console.log(r.data.data)
      //   productDataLoading.value = false
      productNum.value = r.data.data
    })
  }, 1000)
}, 2000)

onMounted(async function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))
  let r = await getsimpleDataRequest()
  //   console.log(r.data.data[0].x)

  //映射出来就可以取出数组
  let xArr = r.data.data.map((v) => v.x)
  let valArr = r.data.data.map((v) => v.val)
  console.log(xArr)
  console.log(valArr)

  // 绘制图表
  myChart.setOption({
    xAxis: {
      type: 'category',
      data: xArr,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: valArr,
        type: 'line',
      },
    ],
  })
})

onMounted(async function () {
  let r = await getkDataRequest()
  console.log(r.data)

  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main2'))

  // 绘制图表
  myChart.setOption({
    xAxis: {
      data: r.data.data.x,
    },
    yAxis: {},
    series: [
      {
        type: 'candlestick',
        data: r.data.data.val,
      },
    ],
  })
})
</script>
<style lang="scss" scoped>
#main {
  width: 100%;
  height: 600px;
}
#main2 {
  width: 100%;
  height: 600px;
}
</style>
